<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注册验证</title>
		<style type="text/css">
			table,
			td {
				border: 1px dotted #000000;
				border-collapse: collapse;
				width: 800px;
				height: 50px;
				text-align: center;
				margin: auto;
			}

			.fail {
				color: red;
				font-weight: bolder;
			}
		</style>
		<script>
			function checkUsername() {
				var reg = /[a-z]\w{5,}/;
				if (reg.test(username.value)) {
					usernameHint.style.color = "#000000";
					return true;
				} else {
					usernameHint.style.color = "#FF0000";
					return false;
				}
			}

			function checkPassword() {
				if (password.value.length >= 6) {
					passwordHint.style.color = "#000000";
					return true;
				} else {
					passwordHint.style.color = "#FF0000";
					return false;
				}
			}
			
			function checkConfirmPassword(){
				if(password.value == confirmPassword.value){
					confirmPasswordHint.style.color = "#000000";
					return true;
				}else{
					confirmPasswordHint.style.color = "#FF0000";
					return false;
				}
			}
			
			function checkEmail(){
				var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(reg.test(email.value)){
					emailHint.style.color = "#000000";
					return true;
				}else{
					emailHint.style.color = "#FF0000";
					return false;
				}
			}
			
			function checkPhone(){
				var reg = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
				if(reg.test(phone.value)){
					phoneHint.style.color = "#000000";
					return true;
				}else{
					phoneHint.style.color = "#FF0000";
					return false;
				}
			}
			
			function checkAll(){
				return checkUsername() && checkPassword() && checkConfirmPassword() && checkEmail() && checkPhone();
			}
		</script>
	</head>
	<body>
		<!-- onsubmit表单提交事件,当点击表单提交按钮时会触发该事件,函数返回true则可以提交数据,反之不会提交 -->
		<form action="#" method="post" onsubmit="return checkAll()">
			<table>
				<caption>注册页面</caption>
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" id="username" name="username" onkeyup="checkUsername()"
							required="required" />
					</td>
					<td>
						<span id="usernameHint">*用户名必须以小写字母开头长度不少于6个</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" id="password" name="password" onkeyup="checkPassword()"
							required="required" />
					</td>
					<td>
						<span id="passwordHint">*密码长度不少于6个</span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" id="confirmPassword" name="confirmPassword" onkeyup="checkConfirmPassword()" required="required" />
					</td>
					<td>
						<span id="confirmPasswordHint">*两次输入密码不一致</span>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="text" id="email" name="email" onkeyup="checkEmail()" required="required" />
					</td>
					<td>
						<span id="emailHint">*邮箱格式不正确</span>
					</td>
				</tr>
				<tr>
					<td>手机:</td>
					<td>
						<input type="text" id="phone" name="phone" onkeyup="checkPhone()" required ="required" />
					</td>
					<td>
						<span id="phoneHint">*手机格式不合法</span>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<input type="submit" value="注册" />
						<input type="reset" value="取消" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
